<template>
  <div class="gift-wrap bg_fff main" style="position:relative; height: 100%;box-sizing: border-box;">
    <div class="p10" style="overflow: hidden;">
      <h3 class="title">
        <i class="el-icon-user-solid"></i>俱乐部日常任务
      </h3>
      <div class="btn-list">
        <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDailyTaskList">刷新</el-button>
      </div>
    </div>
    <div class="p10">
        <template>
          <el-radio-group v-model="form.issuetype">
            <el-radio :label="0">待发布</el-radio>
            <el-radio :label="1">已发布</el-radio>
          </el-radio-group>
          <!-- <el-radio v-model="form.issuetype" label="0">待发布</el-radio>
          <el-radio v-model="form.issuetype" label="1">已发布</el-radio> -->
        </template>
        <el-button type="primary" size='small' style='float:right;margin-top:-10px;' icon='el-icon-plus' @click='showLook = true'>创建任务</el-button>
        <el-button type="primary" size='small' style='float:right;margin-top:-10px;margin-right:10px;' @click='getDailyTaskList'>查询</el-button>
    </div>
    <div class="p10">
      <el-table :data="tableData" stripe border style="width: 100%" highlight-current-row v-loading="loading">
        <el-table-column label="序号" width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{(form.pageNo - 1) * form.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskcontent" label="任务内容" header-align="center" align="center"></el-table-column>
        <el-table-column prop="itasktype" label="任务类型" header-align="center" align="center">
            <template slot-scope="scope">
              <p v-if="scope.row.itasktype == 1">照片</p>
              <p v-else>视频</p>
            </template>
        </el-table-column>
        <el-table-column prop="issuetype" label="任务状态" header-align="center" align="center">
           <template slot-scope="scope">
              <p v-if="scope.row.issuetype == 0">待发布</p>
              <p v-else>已发布</p>
            </template>
        </el-table-column>
        <el-table-column prop="createname" label="创建人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="cadddate" label="创建日期" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="delGroupTaskFun(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block p20 tac">
       <!-- 分页 -->
        <el-pagination style="margin-top: 16px; text-align:center;" layout="total, prev, pager, next" :total="total"
          :page-size="form.pageSize" :current-page.sync="form.pageNo" @current-change="handleCurrentChange">
        </el-pagination>
    </div>


    <div class="shade" v-show="showLook">
      <div class="shade-wrap">
        <p>创建任务</p>
        <div class="input-wrap">
          <el-form ref="form" :model="showForm" label-width="80px">
            <el-form-item label="任务内容">
              <el-input type="textarea" v-model="showForm.content" placeholder='最多可输入18个字符'></el-input>
            </el-form-item>
            <el-form-item label="任务类型">
              <el-select v-model="showForm.type" placeholder="请选择活动类型">
                <el-option label="照片" value="1"></el-option>
                <el-option label="视频" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="btn-wrap">
            <el-button @click="addGroupTaskFun">确认</el-button>
            <el-button @click="showLook = false;showForm.content='';showForm.type=''">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    findAllGroupTask,
    delGroupTask,
    addGroupTask
  } from "@/request/api";
  export default {
    data() {
      return {
        loading:false,
        total: 0,
        tableData: [],
        form: {
          pageNo: 1,
          pageSize: 10,
          issuetype:0,
        },
        showForm:{
          content:'',
          type:'',
        },
        showLook:false,
      };
    },
    methods: {
      getDailyTaskList() {
        this.loading = true;
        findAllGroupTask(this.form).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.total = parseInt(res.data.data.total);
            this.loading = false;
          }
        });
      },
      addGroupTaskFun(){
        addGroupTask(this.showForm).then(res =>{
          if (res.data.code == 200) {
            this.showForm.content = '';
            this.showForm.type = '';
            this.showLook = false;
            this.getDailyTaskList()
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      delGroupTaskFun(item){
        let id = item.cgrouptaskid;
        delGroupTask({"cgrouptaskid":id}).then(res =>{
          if (res.data.code == 200) {
            this.$message({
              message:res.data.message,
              type: 'success'
            });
            this.getDailyTaskList()
          }else{
            this.$message.error(res.data.message);
          }
        })
      },
      //分页器
      handleCurrentChange(pgno) {
        this.form.pageNo = pgno;
        this.getDailyTaskList();
      }
    },
    created() {
      this.getDailyTaskList();
    }
  };

</script>

<style lang="scss" scoped>
  .gift-wrap {
    .refresh-btn {
      float: right;
      margin-bottom: 20px;
    }

    .shade {
      width:100%;
      height:100%;
      position:fixed;
      z-index: 101;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.5);

      .shade-wrap {
        width: 400px;
        background: #fff;
        margin: 100px auto;
        border-radius: 5px;
        top:50%;
        left:50%;

        p {
          display: block;
          height: 30px;
          line-height: 30px;
          background: #409eff;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          color: #fff;
          padding-left: 20px;
        }

        .input-wrap {
         padding:20px;
          display: flex;
          // width: 100%;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          .input-item {
            width: 100%;
            margin: 10px 0;
            display: flex;
            justify-content: center;
            align-items: center;

            .el-select {
              width: 120px;
            }

            .el-input {
              width: 200px;
            }

            img {
              width: 100px;
              height: 100px;
            }
          }

          .input-item:nth-of-type(4),
          .input-item:nth-of-type(5) {
            margin-left: -56px;
          }

          .btn-wrap {
            width: 100%;
            display: flex;
            margin: 40px 0 20px 0;
            justify-content: space-around;
          }
        }
      }
    }
  }

</style>
